<template>
  <view class="w-full max-w-[750rpx] mx-auto min-h-screen bg-[#f6f8fa] p-[32rpx] box-border">
    <text class="block text-[56rpx] font-extrabold mb-[48rpx] text-center text-blue-600 drop-shadow">联系方式</text>
    
    <nut-form ref="formRef" :model="form" :rules="formRules" class="max-w-[700rpx] w-full mx-auto box-border">
      <!-- 手机号区域 -->
      <view class="bg-blue-50 rounded-[20rpx] p-[32rpx] mb-[40rpx] box-border">
        <text class="block text-[36rpx] font-bold mb-[32rpx] text-blue-700">📱 手机号码</text>
        
        <nut-form-item label="手机号" prop="手机号" class="mb-[24rpx] box-border text-[32rpx]">
          <nut-input 
            v-model="form.手机号" 
            placeholder="请输入手机号"
            type="tel"
            maxlength="11"
            class="h-[88rpx] text-[32rpx]"
            @input="onPhoneInput"
            @blur="validateField('手机号')"
          />
          <view v-if="phoneError" class="text-[28rpx] text-red-500 mt-[12rpx]">
            {{ phoneError }}
          </view>
        </nut-form-item>
        
        <view v-if="form.手机号 && isValidPhone" class="flex items-center text-[28rpx] text-green-600">
          <text class="mr-[12rpx]">✓</text>
          <text>手机号格式正确</text>
        </view>
      </view>
      
      <!-- 固定电话区域 -->
      <view class="bg-green-50 rounded-[16rpx] p-[24rpx] mb-[32rpx] box-border">
        <text class="block text-[28rpx] font-bold mb-[24rpx] text-green-700">☎️ 固定电话</text>
        
        <nut-form-item label="电话" class="mb-[16rpx] box-border">
          <nut-input 
            v-model="form.电话" 
            placeholder="请输入固定电话（选填）"
            type="tel"
            @input="onTelInput"
            @blur="validateTel"
          />
          <view v-if="telError" class="text-[24rpx] text-red-500 mt-[8rpx]">
            {{ telError }}
          </view>
        </nut-form-item>
        
        <view class="text-[24rpx] text-gray-500">
          <text>格式示例：010-12345678 或 0755-87654321</text>
        </view>
        
        <view v-if="form.电话 && isValidTel" class="flex items-center text-[24rpx] text-green-600 mt-[8rpx]">
          <text class="mr-[8rpx]">✓</text>
          <text>电话号码格式正确</text>
        </view>
      </view>
      
      <!-- 电子邮箱区域 -->
      <view class="bg-purple-50 rounded-[16rpx] p-[24rpx] mb-[32rpx] box-border">
        <text class="block text-[28rpx] font-bold mb-[24rpx] text-purple-700">📧 电子邮箱</text>
        
        <nut-form-item label="电子邮箱" prop="电子邮箱" class="mb-[16rpx] box-border">
          <nut-input 
            v-model="form.电子邮箱" 
            placeholder="请输入电子邮箱"
            type="email"
            @input="onEmailInput"
            @blur="validateField('电子邮箱')"
          />
          <view v-if="emailError" class="text-[24rpx] text-red-500 mt-[8rpx]">
            {{ emailError }}
          </view>
        </nut-form-item>
        
        <view class="text-[24rpx] text-gray-500">
          <text>格式示例：example@email.com</text>
        </view>
        
        <view v-if="form.电子邮箱 && isValidEmail" class="flex items-center text-[24rpx] text-green-600 mt-[8rpx]">
          <text class="mr-[8rpx]">✓</text>
          <text>邮箱格式正确</text>
        </view>
      </view>
      
      <!-- 联系方式优先级提示 -->
      <view class="bg-orange-50 rounded-[16rpx] p-[24rpx] mb-[32rpx] box-border">
        <text class="block text-[28rpx] font-bold mb-[16rpx] text-orange-700">⚠️ 重要提示</text>
        <text class="block text-[24rpx] text-gray-600 leading-[36rpx]">
          • 手机号为必填项，用于接收重要通知<br/>
          • 电子邮箱为必填项，用于发送健康报告<br/>
          • 固定电话为选填项，可作为备用联系方式
        </text>
      </view>
      
      <!-- 操作按钮 -->
      <view class="mt-[48rpx] flex gap-[24rpx]">
        <nut-button 
          block 
          type="default" 
          class="h-[96rpx] rounded-[16rpx] text-[32rpx] font-bold shadow flex-1"
          @click="resetForm"
        >
          重置表单
        </nut-button>
        <nut-button 
          block 
          type="primary" 
          class="h-[96rpx] rounded-[16rpx] text-[32rpx] font-bold shadow flex-1 bg-green-500 hover:bg-green-600 active:bg-green-700"
          :loading="submitting"
          @click="submitForm"
        >
          {{ submitting ? '保存中...' : '保存联系方式' }}
        </nut-button>
      </view>
    </nut-form>
  </view>
</template>

<script setup lang="ts">
import Taro from '@tarojs/taro'
import { ref, reactive, computed } from 'vue'
// import { 
//   Form as NutForm, 
//   FormItem as NutFormItem, 
//   Input as NutInput,
//   Button as NutButton
// } from '@nutui/nutui-taro'

/**
 * 联系方式表单数据
 * @typedef {Object} ContactInfo
 * @property {string} 手机号
 * @property {string} 电话
 * @property {string} 电子邮箱
 */
const form = ref({
  手机号: '',
  电话: '',
  电子邮箱: ''
})

const formRef = ref()
const submitting = ref(false)
const phoneError = ref('')
const telError = ref('')
const emailError = ref('')

// 表单验证规则
const formRules = reactive({
  手机号: [
    { required: true, message: '请输入手机号' },
    { 
      validator: (value: string) => /^1[3-9]\d{9}$/.test(value), 
      message: '请输入正确的手机号格式' 
    }
  ],
  电子邮箱: [
    { required: true, message: '请输入电子邮箱' },
    { 
      validator: (value: string) => /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(value), 
      message: '请输入正确的邮箱格式' 
    }
  ]
})

// 验证状态计算属性
const isValidPhone = computed(() => {
  return form.value.手机号 && /^1[3-9]\d{9}$/.test(form.value.手机号)
})

const isValidTel = computed(() => {
  if (!form.value.电话) return false
  return /^0\d{2,3}-?\d{7,8}$/.test(form.value.电话)
})

const isValidEmail = computed(() => {
  return form.value.电子邮箱 && /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(form.value.电子邮箱)
})

// 手机号输入验证
const onPhoneInput = (value: string) => {
  phoneError.value = ''
  
  // 只允许数字
  const numericValue = value.replace(/\D/g, '')
  if (numericValue !== value) {
    form.value.手机号 = numericValue
  }
  
  // 实时验证格式
  if (numericValue && numericValue.length === 11) {
    if (!/^1[3-9]\d{9}$/.test(numericValue)) {
      phoneError.value = '请输入正确的手机号格式'
    }
  }
}

// 固定电话输入验证
const onTelInput = (value: string) => {
  telError.value = ''
  
  // 允许数字和连字符
  const validValue = value.replace(/[^\d-]/g, '')
  if (validValue !== value) {
    form.value.电话 = validValue
  }
}

// 固定电话验证
const validateTel = () => {
  if (form.value.电话 && !isValidTel.value) {
    telError.value = '请输入正确的固定电话格式，如：010-12345678'
  } else {
    telError.value = ''
  }
}

// 邮箱输入验证
const onEmailInput = (value: string) => {
  emailError.value = ''
  
  // 转换为小写
  const lowerValue = value.toLowerCase()
  if (lowerValue !== value) {
    form.value.电子邮箱 = lowerValue
  }
  
  // 实时验证格式
  if (lowerValue && !/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(lowerValue)) {
    emailError.value = '请输入正确的邮箱格式'
  }
}

// 字段验证（兼容没有 validateField 的场景）
const validateField = async (fieldName: string) => {
  if (!formRef.value) return true
  const maybeForm: any = formRef.value
  if (typeof maybeForm.validateField === 'function') {
    return maybeForm.validateField(fieldName)
  }
  if (typeof maybeForm.validate === 'function') {
    return maybeForm.validate()
  }
  return true
}

// 重置表单
const resetForm = () => {
  Taro.showModal({
    title: '确认重置',
    content: '确定要重置表单吗？所有已填写的联系方式将被清空。',
    success: (res) => {
      if (res.confirm) {
        form.value = {
          手机号: '',
          电话: '',
          电子邮箱: ''
        }
        phoneError.value = ''
        telError.value = ''
        emailError.value = ''
        
        Taro.showToast({
          title: '表单已重置',
          icon: 'success',
          duration: 1500
        })
      }
    }
  })
}

// 表单提交
const submitForm = async () => {
  try {
    submitting.value = true
    
    // 验证固定电话（如果填写了）
    if (form.value.电话) {
      validateTel()
      if (telError.value) {
        throw new Error('固定电话格式不正确')
      }
    }
    
    await formRef.value.validate()
    
    // 清除所有错误信息
    phoneError.value = ''
    telError.value = ''
    emailError.value = ''
    
    // 模拟提交延迟
    await new Promise(resolve => setTimeout(resolve, 1500))
    
    // 显示成功提示
    Taro.showToast({
      title: '保存成功',
      icon: 'success',
      duration: 2000
    })
    
    // 显示详细成功信息
    setTimeout(() => {
      Taro.showModal({
        title: '保存成功',
        content: `联系方式已保存：\n手机号：${form.value.手机号}\n邮箱：${form.value.电子邮箱}${form.value.电话 ? `\n电话：${form.value.电话}` : ''}`,
        showCancel: false,
        confirmText: '确定'
      })
    }, 2000)
    
    // 这里可以添加实际的保存逻辑
    // 联系方式数据
    
  } catch (error) {
    // 显示错误提示
    Taro.showToast({
      title: '请完善必填信息',
      icon: 'error',
      duration: 2000
    })
  } finally {
    submitting.value = false
  }
}
</script>

<!--
性能优化说明：
- 仅渲染表单，页面结构简单，渲染性能高。
--> 